import {
  size,
  IFormProps,
  pageSize,
  dateTimeFormat,
  formItemLayout,
  getUploadResult,
  uploadUrl,
  tailFormItemLayoutLeft,
  tailFormItemLayout,
  getFileList,
  getImages,
  dateFormat,
  getToken
} from "../../utils/common";
import React from "react";
import { connect } from "dva";
import {
  Form,
  Row,
  Col,
  Button,
  Input,
  Table,
  Popconfirm,
  DatePicker,
  Select,
  message,
  Tabs,
  InputNumber,
  Checkbox
} from "antd";
import moment from "moment";
const Styles = require("../../styles/index.less");
import queryString from "query-string";
import * as api from "../../api/api";
import Uploads from "../../components/Uploads";
import LzEditor from "react-lz-editor";
import ItemSpecEdit from "../../components/malls/ItemSpecEdit";
import { PaginationProps } from "antd/lib/pagination";
import ItemSpecList from "../../components/malls/ItemSpecList";
import ItemSkuList from "../../components/malls/ItemSkuList";
import ItemSkuEdit from "../../components/malls/ItemSkuEdit";
import ItemSkuCategoryEdit from "../../components/malls/ItemSkuCategoryEdit";
import ItemCommentList from "../../components/malls/ItemCommentList";
import ItemCommentReplyEdit from "../../components/malls/ItemCommentReplyEdit";
import Enumerable from "linq";
const TabPane = Tabs.TabPane;

export interface IItemPros extends IFormProps {
  item: any;
}
class Item extends React.PureComponent<IItemPros, any> {
  constructor(props) {
    super(props);
  }

  state = {
    responseList: [],
    visible: false,
    couponVisible: false,
    skuVisible: false,
    skuCategoryVisible: false,
    commentReplyVisible: false,
    fileList: [],
    filesList: [],
    content: "",
    itemId: undefined,
    isTimeLimit: false,
    isWholesale: false,
    isGroup: false,
    limitBeginTime: undefined,
    limitEndTime: undefined,
    storeId: undefined,
    isBargain: false,
    isReleasePoints: false,
    itemType: 0,
    treeCount: 0,
    maxTreeNumber: 10002,
    minTreeNumber: 10001,
    fruitFinishTime: "2020-05-01 00:00:00",
    itemCategoryId: 0
  };

  componentDidMount() {
    this.getStores();
    this.getDividends();
  }

  search = () => {
    this.getItemCategories();
    this.getRecommendCategories();
    this.getReleasePointRules();
    this.getItem();
    this.getItemSpecs();
    this.getItemCoupons();
    this.getItemComments();
    this.getItemSkus();
    this.getItemSkuSpecs();
  };

  getItemCategories = (payload?) => {
    if (!payload) {
      const { storeId } = this.props.item;
      payload = { storeId };
    }
    this.props.dispatch({
      type: "item/getItemCategories",
      payload
    });
  };

  getStores = () => {
    this.props.dispatch({
      type: "item/getStores",
      payload: {
        callback: () => {
          this.search();
        }
      }
    });
  };

  getDividends = (payload?) => {
    payload = Object.assign(
      {},
      this.props.item.dividendSearchs,
      this.props.form.getFieldsValue(),
      { ...payload }
    );
    this.props.dispatch({
      type: "item/getDividends",
      payload
    });
  };

  getRecommendCategories = (payload?) => {
    if (!payload) {
      const { storeId } = this.props.item;
      payload = { storeId };
    }
    this.props.dispatch({
      type: "item/getRecommendCategories",
      payload
    });
  };

  getReleasePointRules = (payload?) => {
    this.props.dispatch({
      type: "item/getReleasePointRules",
      payload
    });
  };

  getItem = () => {
    const { id } = queryString.parse(this.props.location.search);
    if (id) {
      this.props.dispatch({
        type: "item/getItem",
        payload: {
          id,
          callback: (item: api.SingleUserMallItemsVOItemVO) => {
            this.setState({
              content: item.content,
              fileList: getFileList(item.picture),
              filesList: getFileList(item.pictures),
              isTimeLimit: item.isTimeLimit,
              isWholesale: item.isWholesale,
              isGroup: item.isGroup,
              isBargain: item.isBargain,
              isReleasePoints: item.isReleasePoints,
              itemType: item.itemType,
              itemCategoryId: item.itemCategoryId,
              treeCount: item.treeCount,
              maxTreeNumber: item.maxTreeNumber,
              minTreeNumber: item.minTreeNumber
            });
          }
        }
      });
    } else {
      this.props.dispatch({
        type: "item/save",
        payload: { item: undefined, loaded: true }
      });
    }
  };

  getItemCoupons = () => {
    const { id } = queryString.parse(this.props.location.search);
    if (id) {
      this.props.dispatch({
        type: "item/getItemCoupons",
        payload: { id }
      });
    } else {
      this.props.dispatch({
        type: "item/save",
        payload: { itemCoupons: [] }
      });
    }
  };

  getItemSpecs = () => {
    const { id } = queryString.parse(this.props.location.search);
    if (id) {
      this.props.dispatch({
        type: "item/getItemSpecs",
        payload: { id }
      });
    } else {
      this.props.dispatch({
        type: "item/save",
        payload: { itemSpecs: [] }
      });
    }
  };

  getItemSkus = () => {
    const { id } = queryString.parse(this.props.location.search);
    if (id) {
      this.props.dispatch({
        type: "item/getItemSkus",
        payload: { id }
      });
    } else {
      this.props.dispatch({
        type: "item/save",
        payload: { itemSkus: [] }
      });
    }
  };

  getItemSkuSpecs = () => {
    const { id } = queryString.parse(this.props.location.search);
    if (id) {
      this.props.dispatch({
        type: "item/getItemSkuSpecs",
        payload: { id }
      });
    } else {
      this.props.dispatch({
        type: "item/save",
        payload: { itemSkuSpecs: [] }
      });
    }
  };

  getItemComments = (payload?) => {
    const { id } = queryString.parse(this.props.location.search);
    const { pageIndex, pageSize } = this.props.item.itemCommentSearchs;
    payload = Object.assign({}, { pageIndex, pageSize }, payload);
    if (id) {
      payload = Object.assign({}, payload, { itemId: id });
      this.props.dispatch({
        type: "item/getItemComments",
        payload: payload
      });
    } else {
      this.props.dispatch({
        type: "item/save",
        payload: { itemComments: { totalCount: 0, items: [] } }
      });
    }
  };

  setCommentReply = form => {
    const { id } = this.props.item.itemComment;
    form = Object.assign({}, form, { id });
    this.props.dispatch({
      type: "item/setItemReplyComment",
      payload: {
        form,
        callback: () => {
          this.setCommentReplyVisible();
          this.getItemComments();
          message.success("评论已回复");
        }
      }
    });
  };

  setComment = (itemComment = {}) => {
    this.props.dispatch({
      type: "item/save",
      payload: { itemComment }
    });
    this.setCommentReplyVisible(true);
  };

  setCommentReplyVisible = (commentReplyVisible = false) => {
    this.setState({ commentReplyVisible });
  };

  reset = () => {
    this.props.form.resetFields();
  };

  save = e => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, form) => {
      if (!err) {
        if (form["minTreeNumber"] > form["maxTreeNumber"]) {
          message.warn("最小树号需小于等于最大树号");
          return;
        }

        form["content"] = this.state.content;
        form["limitBeginTime"] = this.state.limitBeginTime;
        form["fruitFinishTime"] = this.state.fruitFinishTime;
        form["limitEndTime"] = this.state.limitEndTime;
        form["picture"] = getImages(this.state.fileList);
        form["pictures"] = getImages(this.state.filesList);
        let { item } = this.props.item;
        form = Object.assign({}, item, form);
        this.props.dispatch({
          type: "item/saveItem",
          payload: {
            form,
            callback: () => {
              message.success("保存成功，请编辑规格与价格信息");
              const { item } = this.props.item;
              this.props.history.push("/mall/item?id=" + item.id);
            }
          }
        });
      }
    });
  };

  imageChange = fileList => {
    this.setState({ fileList });
  };

  imagesChange = filesList => {
    this.setState({ filesList });
  };

  onSelectTimeOk = value => {
    this.setState({
      limitBeginTime: moment(value[0]).format(dateTimeFormat),
      limitEndTime: moment(value[1]).format(dateTimeFormat)
    });
  };

  onFruitSelectTimeOk = value => {
    this.setState({
      fruitFinishTime: moment(value).format(dateTimeFormat)
    });
  };

  onItemTypeChange = value => {
    this.setState({
      itemType: value
    });
  };

  onItemCategoryChange = value => {
    console.log(value);
    this.setState({
      itemCategoryId: value
    });
  };

  onMinTreeNumberChange = value => {
    var treeCount = this.state.maxTreeNumber - value + 1;
    if (treeCount < 1) {
      message.warn("最小树号有误,请重新输入");
      return;
    }
    this.setState({ minTreeNumber: value, treeCount });
  };

  onMaxTreeNumberChange = value => {
    var treeCount = value - this.state.minTreeNumber + 1;
    if (treeCount < 1) {
      message.warn("最大树号有误,请重新输入");
      return;
    }
    this.setState({ maxTreeNumber: value, treeCount });
  };

  onChange = info => {
    let currFileList = info.fileList;
    currFileList = currFileList.filter(f => !f.length);
    if (!!currFileList && currFileList.length != 0) {
      this.setState({ responseList: currFileList });
    }
    //Read remote address and display.
    //读取远程路径并显示链接
    currFileList = currFileList.map(file => {
      if (file.response) {
        getUploadResult(file.response, image => {
          file.url = image;
        });
      }
      if (!file.length) {
        return file;
      }
    });
  };
  beforeUpload(file) {
    console.log("beforeUpload like", file);
  }
  receiveHtml = content => {
    //console.log("recieved HTML content", content);
    //清空responseList
    this.setState({ responseList: [], content });
  };

  setVisible = (visible = false) => {
    this.setState({ visible });
  };

  setCouponVisible = (couponVisible = false) => {
    this.setState({ couponVisible });
  };

  setSkuVisible = (skuVisible = false) => {
    this.setState({ skuVisible });
  };

  setSkuCategoryVisible = (skuCategoryVisible = false) => {
    this.setState({ skuCategoryVisible });
  };

  addSpec = () => {
    this.editSpec();
  };

  editSpec = (itemSpec = {}) => {
    this.props.dispatch({
      type: "item/save",
      payload: { itemSpec }
    });
    this.setVisible(true);
  };

  addSkuCategory = () => {
    this.editSkuCategory();
  };

  editSkuCategory = (itemSkuCategory = {}) => {
    this.props.dispatch({
      type: "item/save",
      payload: { itemSkuCategory }
    });
    this.setSkuCategoryVisible(true);
  };

  addSku = () => {
    this.editSku();
  };

  editSku = (itemSku = {}) => {
    this.props.dispatch({
      type: "item/save",
      payload: { itemSku }
    });
    this.setSkuVisible(true);
  };

  addCoupon = () => {
    this.editCoupon();
  };

  editCoupon = (itemCoupon = {}) => {
    this.props.dispatch({
      type: "item/save",
      payload: { itemCoupon }
    });
    this.setCouponVisible(true);
  };

  saveSpec = form => {
    let { itemSpec, item } = this.props.item;
    form = Object.assign({}, itemSpec, form, { itemId: item.id });
    this.props.dispatch({
      type: "item/saveItemSpec",
      payload: {
        form,
        callback: () => {
          this.setVisible();
          this.getItemSpecs();
          this.getItemSkuSpecs();
        }
      }
    });
  };

  removeSpec = id => {
    this.props.dispatch({
      type: "item/removeItemSpec",
      payload: {
        form: { id },
        callback: () => {
          this.getItemSpecs();
          this.getItemSkuSpecs();
        }
      }
    });
  };

  saveSkuCategory = form => {
    let { itemSkuCategory, item } = this.props.item;
    form = Object.assign({}, itemSkuCategory, form, { itemId: item.id });
    this.props.dispatch({
      type: "item/saveItemSkuCategory",
      payload: {
        form,
        callback: () => {
          this.setSkuCategoryVisible();
          this.getItemSkus();
          this.getItemSkuSpecs();
        }
      }
    });
  };

  removeSkuCategory = id => {
    this.props.dispatch({
      type: "item/removeItemSkuCategory",
      payload: {
        form: { id },
        callback: () => {
          this.getItemSkus();
          this.getItemSkuSpecs();
        }
      }
    });
  };

  saveSku = form => {
    let { itemSku } = this.props.item;
    form = Object.assign({}, itemSku, form);
    this.props.dispatch({
      type: "item/saveItemSku",
      payload: {
        form,
        callback: () => {
          this.setSkuVisible();
          this.getItemSkus();
          this.getItemSkuSpecs();
        }
      }
    });
  };

  removeSku = id => {
    this.props.dispatch({
      type: "item/removeItemSku",
      payload: {
        form: { id },
        callback: () => {
          this.getItemSkus();
          this.getItemSkuSpecs();
        }
      }
    });
  };

  saveCoupon = form => {
    let { itemCoupon, item } = this.props.item;
    form = Object.assign({}, itemCoupon, form, {
      itemId: item.id,
      storeId: item.storeId
    });
    this.props.dispatch({
      type: "item/saveCoupon",
      payload: {
        form,
        callback: () => {
          this.setCouponVisible();
          this.getItemCoupons();
        }
      }
    });
  };

  removeCoupon = id => {
    this.props.dispatch({
      type: "item/removeCoupons",
      payload: {
        form: { ids: [id] },
        callback: () => {
          this.getItemCoupons();
        }
      }
    });
  };

  removeComment = id => {
    this.props.dispatch({
      type: "item/removeItemComment",
      payload: {
        form: { id },
        callback: () => {
          this.getItemComments();
        }
      }
    });
  };

  storeChange = storeId => {
    this.setState({ storeId });
    this.getItemCategories({ storeId });
    this.getRecommendCategories({ storeId });
  };

  dividendChange = dividendId => {
    this.setState({ dividendId });
    this.getDividends({ dividendId });
  };

  isGroupChange = isGroupChange => {
    this.setState({ isGroup: isGroupChange.target.checked });
    if (isGroupChange.target.checked) {
      this.props.form.setFieldsValue({ isTimeLimit: false });
      this.setState({ isTimeLimit: false });
      this.props.form.setFieldsValue({ isBargain: false });
      this.setState({ isBargain: false });
    }
  };

  isTimeLimitChange = isTimeLimitChange => {
    this.setState({ isTimeLimit: isTimeLimitChange.target.checked });
    if (isTimeLimitChange.target.checked) {
      this.props.form.setFieldsValue({ isGroup: false });
      this.setState({ isGroup: false });
      this.props.form.setFieldsValue({ isBargain: false });
      this.setState({ isBargain: false });
    }
  };

  isBargainChange = isBargainChange => {
    this.setState({ isBargain: isBargainChange.target.checked });
    if (isBargainChange.target.checked) {
      this.props.form.setFieldsValue({ isTimeLimit: false });
      this.setState({ isTimeLimit: false });
      this.props.form.setFieldsValue({ isGroup: false });
      this.setState({ isGroup: false });
    }
  };

  isReleasePointsChange = isReleasePointsChange => {
    this.setState({ isReleasePoints: isReleasePointsChange.target.checked });
  };

  render(): JSX.Element {
    //console.log(this.props);
    const { getFieldDecorator } = this.props.form;
    const {
      isTimeLimit,
      isGroup,
      isWholesale,
      isBargain,
      isReleasePoints,
      itemType,
      treeCount,
      itemCategoryId
    } = this.state;
    const { loading } = this.props;
    const {
      //item,
      itemSpec,
      itemSpecs: { items: itemSpecs },
      itemSkuSpecs: { items: itemSkuSpecs },
      itemSku,
      itemSkus: { items: itemSkus },
      itemSkuCategory,
      itemCategories: { items: itemCategories },
      recommendCategories: { items: recommendCategories },
      releasePointRules: { items: releasePointRules },
      itemComments: { totalCount, items: itemComments },
      itemCommentSearchs: { pageIndex, pageSize },
      stores: { items: stores }
    } = this.props.item;
    const {
      dividends: { items: dividends }
    } = this.props.item;
    if (this.props.item.item) {
      this.state.storeId = this.props.item.item.storeId;
    }
    const item: api.SingleUserMallItemsVOItemVO = this.props.item.item;
    const _itemSkuSpecs = Enumerable.from(itemSkuSpecs)
      .where(x => x["enabled"])
      .select(x => {
        const t = { ...x, id: -Enumerable.from(itemSkuSpecs).indexOf(x) };
        return t;
      })
      .toArray();
    //console.log(_itemSkuSpecs);
    const _itemSpecs = Enumerable.from(itemSpecs)
      .select(x => {
        const t = {
          ...x,
          enabled:
            Enumerable.from(itemSkuSpecs)
              .select(n => n["specNo"])
              .indexOf(x["specNo"]) > -1
        };
        return t;
      })
      .toArray();
    const totalItemSpecs: any = [..._itemSpecs, ..._itemSkuSpecs];
    const uploadProps = {
      name: "file",
      action: uploadUrl,
      headers: getToken(),
      onChange: this.onChange,
      listType: "picture",
      fileList: this.state.responseList,
      data: file => {},
      multiple: true,
      beforeUpload: this.beforeUpload,
      showUploadList: true
    };

    const pageChange = (pageIndex, pageSize) => {
      let payload = Object.assign({}, this.props.item.itemCommentSearchs, {
        pageIndex,
        pageSize
      });
      this.getItemComments(payload);
    };
    const pagination: PaginationProps | boolean = {
      total: totalCount,
      defaultCurrent: 1,
      current: pageIndex,
      pageSize: pageSize,
      showSizeChanger: true,
      showTotal: total => `共 ${total} 条`,
      showQuickJumper: true,
      pageSizeOptions: ["10", "20", "30", "50"],
      onShowSizeChange: pageChange,
      onChange: pageChange
    };
    return (
      <Row className={Styles.F_BG_WHITE1}>
        <Row className={Styles.F_BG_WHITE}>
          <Tabs defaultActiveKey="1">
            <TabPane tab="商品信息" key="1">
              <Col span={18}>
                <Form>
                  <Form.Item label="名称" {...formItemLayout}>
                    {getFieldDecorator("name", {
                      rules: [
                        {
                          required: true,
                          message: "请输入名称"
                        }
                      ],
                      initialValue: item && item.name
                    })(
                      <Input style={{ width: 300 }} placeholder="请输入名称" />
                    )}
                  </Form.Item>
                  <Form.Item label="封面图" {...formItemLayout}>
                    {getFieldDecorator("picture", {
                      rules: [
                        {
                          required: true,
                          message: "请上传封面图"
                        }
                      ],
                      initialValue: item && item.picture
                    })(
                      <Uploads
                        editable={true}
                        fileList={this.state.fileList}
                        onChange={this.imageChange}
                      />
                    )}
                  </Form.Item>
                  <Form.Item label="主图" {...formItemLayout}>
                    {getFieldDecorator("pictures", {
                      rules: [
                        {
                          required: true,
                          message: "请上传主图"
                        }
                      ],
                      initialValue: item && item.pictures
                    })(
                      <Uploads
                        editable={true}
                        isList={true}
                        fileList={this.state.filesList}
                        onChange={this.imagesChange}
                      />
                    )}
                  </Form.Item>
                  <Form.Item label="首页标签(以空格隔开)" {...formItemLayout}>
                    {getFieldDecorator("mainTags", {
                      initialValue: item && item.mainTags
                    })(
                      <Input
                        style={{ width: 300 }}
                        placeholder="请输入标签（显示在首页 以空格隔开）"
                      />
                    )}
                  </Form.Item>
                  <Form.Item label="详情标签" {...formItemLayout}>
                    {getFieldDecorator("tags", {
                      initialValue: item && item.tags
                    })(
                      <Input
                        style={{ width: 300 }}
                        placeholder="请输入标签（显示在商品详情页）"
                      />
                    )}
                  </Form.Item>
                  <Form.Item label="可得体验金(元)" {...formItemLayout}>
                    {getFieldDecorator("points", {
                      rules: [
                        {
                          required: true,
                          message: "请输入体验金金额"
                        }
                      ],
                      initialValue: item && item.points
                    })(<InputNumber placeholder="请输入体验金金额" min={0} />)}
                  </Form.Item>
                  <Form.Item label="发货地" {...formItemLayout}>
                    {getFieldDecorator("shipments", {
                      rules: [
                        {
                          required: true,
                          message: "请输入发货地"
                        }
                      ],
                      initialValue: item && item.shipments
                    })(
                      <Input
                        style={{ width: 300 }}
                        placeholder="请输入发货地"
                      />
                    )}
                  </Form.Item>
                  <Form.Item label="运费（元）" {...formItemLayout}>
                    {getFieldDecorator("freight", {
                      rules: [
                        {
                          required: true,
                          message: "请输入运费"
                        }
                      ],
                      initialValue: item && item.freight
                    })(<InputNumber placeholder="请输入运费" min={0} />)}
                  </Form.Item>
                  <Form.Item label="包装费（元）" {...formItemLayout}>
                    {getFieldDecorator("packPrice", {
                      rules: [
                        {
                          required: true,
                          message: "请输入包装费"
                        }
                      ],
                      initialValue: item && item.packPrice
                    })(<InputNumber placeholder="请输入包装费" min={0} />)}
                  </Form.Item>
                  <Form.Item label="请选择店铺" {...formItemLayout}>
                    {getFieldDecorator("storeId", {
                      rules: [
                        {
                          required: true,
                          message: "请选择店铺"
                        }
                      ],
                      initialValue: item && item.storeId
                    })(
                      <Select
                        style={{ width: 300 }}
                        onChange={this.storeChange}
                      >
                        {stores.map(
                          (store: api.SingleUserMallStoresVOStoreVO) => {
                            return (
                              <Select.Option value={store.id}>
                                {store.name}
                              </Select.Option>
                            );
                          }
                        )}
                      </Select>
                    )}
                  </Form.Item>
                  <Form.Item label="商品分类" {...formItemLayout}>
                    {getFieldDecorator("itemCategoryId", {
                      rules: [
                        {
                          required: true,
                          message: "请选择商品分类"
                        }
                      ],
                      initialValue: item && item.itemCategoryId
                    })(
                      <Select
                        style={{ width: 300 }}
                        onChange={this.onItemCategoryChange}
                      >
                        {itemCategories.map(
                          (i: api.SingleUserMallItemsVOItemCategoryVO) => {
                            return i.subItemCategories &&
                              i.subItemCategories.length > 0 ? (
                              <Select.OptGroup key={i.id} label={i.name}>
                                {i.subItemCategories.map(subItem => {
                                  return (
                                    <Select.Option value={subItem.id}>
                                      {subItem.name}
                                    </Select.Option>
                                  );
                                })}
                              </Select.OptGroup>
                            ) : (
                              <Select.Option value={i.id}>
                                {i.name}
                              </Select.Option>
                            );
                          }
                        )}
                      </Select>
                    )}
                  </Form.Item>
                  <Form.Item label="商品类型" {...formItemLayout}>
                    {getFieldDecorator("itemType", {
                      initialValue: item && item.itemType ? item.itemType : 0
                    })(
                      <Select
                        style={{ width: 300 }}
                        placeholder="请选择"
                        onChange={this.onItemTypeChange}
                      >
                        <Select.Option value={0}>商品</Select.Option>
                        <Select.Option value={1}>分红</Select.Option>
                      </Select>
                    )}
                  </Form.Item>
                  {itemType == 1 ? (
                    <div>
                      <Form.Item label="期数" {...formItemLayout}>
                        {getFieldDecorator("numberPeriods", {
                          initialValue: item && item.numberPeriods
                        })(<InputNumber placeholder="请输入期数" />)}
                      </Form.Item>
                      <Form.Item label="果树总棵数" {...formItemLayout}>
                        {getFieldDecorator("treeTotalQty", {
                          initialValue: item && item.treeTotalQty
                        })(<InputNumber placeholder="请输入总棵数" />)}
                      </Form.Item>
                      <Form.Item label="期限（月）" {...formItemLayout}>
                        {getFieldDecorator("dividendId", {
                          initialValue: item && item.dividendId
                        })(
                          <Select
                            style={{ width: 300 }}
                            onChange={this.dividendChange}
                          >
                            {dividends.map(
                              (
                                dividend: api.SingleUserMallDividendsVODividendVO
                              ) => {
                                return (
                                  <Select.Option value={dividend.id}>
                                    {dividend.timelimit}{" "}
                                  </Select.Option>
                                );
                              }
                            )}
                          </Select>
                        )}
                      </Form.Item>
                    </div>
                  ) : (
                    ""
                  )}
                  {itemCategoryId == 7 && itemType == 0 ? (
                    <div>
                      <Form.Item label="保底水果名称" {...formItemLayout}>
                        {getFieldDecorator("latestFruitName", {
                          initialValue: item && item.latestFruitName
                        })(
                          <Input
                            placeholder="请输入保底水果名称"
                            style={{ width: 300 }}
                          />
                        )}
                      </Form.Item>
                      <Form.Item label="保底水果公斤数" {...formItemLayout}>
                        {getFieldDecorator("latestFruitAmount", {
                          initialValue: item && item.latestFruitAmount
                        })(
                          <InputNumber
                            placeholder="请输入保底水果公斤数"
                            min={1}
                            max={999}
                          />
                        )}
                      </Form.Item>
                      <Form.Item label="出产水果果树地址" {...formItemLayout}>
                        {getFieldDecorator("treeAddress", {
                          initialValue: item && item.treeAddress
                        })(
                          <Input
                            placeholder="请输入出产水果果树地址"
                            style={{ width: 300 }}
                          />
                        )}
                      </Form.Item>
                      <Form.Item label="出产水果最小树号" {...formItemLayout}>
                        {getFieldDecorator("minTreeNumber", {
                          initialValue: (item && item.minTreeNumber) || 1001
                        })(
                          <InputNumber
                            min={1001}
                            onChange={this.onMinTreeNumberChange}
                          />
                        )}
                      </Form.Item>
                      <Form.Item label="出产水果最大树号" {...formItemLayout}>
                        {getFieldDecorator("maxTreeNumber", {
                          initialValue: (item && item.maxTreeNumber) || 1001
                        })(
                          <InputNumber
                            min={1001}
                            onChange={this.onMaxTreeNumberChange}
                          />
                        )}
                      </Form.Item>
                      <Form.Item label="出产树木数量" {...formItemLayout}>
                        {getFieldDecorator("treeCount", {
                          initialValue: treeCount
                        })(<InputNumber min={1} contentEditable={false} />)}
                      </Form.Item>
                      <Form.Item label="预计成熟时间" {...formItemLayout}>
                        {getFieldDecorator("finishTime", {
                          initialValue:
                            item && item.fruitFinishTime
                              ? moment(item.fruitFinishTime)
                              : moment(new Date("2020-05-01 00:00:00"))
                        })(
                          <DatePicker
                            showTime={{ format: "HH:mm" }}
                            format="YYYY-MM-DD HH:mm"
                            placeholder={"成熟时间"}
                            onOk={this.onFruitSelectTimeOk}
                          />
                        )}
                      </Form.Item>
                    </div>
                  ) : (
                    ""
                  )}
                  <Form.Item label="推荐类型" {...formItemLayout}>
                    {getFieldDecorator("recommendCategoryId", {
                      initialValue: item && item.recommendCategoryId
                    })(
                      <Select style={{ width: 300 }}>
                        {<Select.Option value="">无</Select.Option>}
                        {recommendCategories.map(
                          (
                            item: api.SingleUserMallItemsVORecommendCategoryVO
                          ) => {
                            return (
                              <Select.Option value={item.id}>
                                {item.title}
                              </Select.Option>
                            );
                          }
                        )}
                      </Select>
                    )}
                  </Form.Item>
                  <Form.Item label="是否团购" {...formItemLayout}>
                    {getFieldDecorator("isGroup", {
                      valuePropName: "checked",
                      initialValue: this.state.isGroup
                    })(<Checkbox onChange={this.isGroupChange} />)}
                  </Form.Item>
                  <Form.Item label="是否砍价" {...formItemLayout}>
                    {getFieldDecorator("isBargain", {
                      valuePropName: "checked",
                      initialValue: this.state.isBargain
                    })(<Checkbox onChange={this.isBargainChange} />)}
                  </Form.Item>
                  <Form.Item label="是否释放体验金" {...formItemLayout}>
                    {getFieldDecorator("isReleasePoints", {
                      valuePropName: "checked",
                      initialValue: this.state.isReleasePoints
                    })(<Checkbox onChange={this.isReleasePointsChange} />)}
                  </Form.Item>
                  {isReleasePoints ? (
                    <Form.Item label="体验金模板" {...formItemLayout}>
                      {getFieldDecorator("releasePointId", {
                        initialValue: item && item.releasePointId
                      })(
                        <Select style={{ width: 300 }}>
                          {<Select.Option value="">无</Select.Option>}
                          {releasePointRules.map(
                            (
                              item: api.SingleUserMallMallVOReleasePointRulesVO
                            ) => {
                              return (
                                <Select.Option value={item.id}>
                                  {item.name}
                                </Select.Option>
                              );
                            }
                          )}
                        </Select>
                      )}
                    </Form.Item>
                  ) : (
                    undefined
                  )}
                  {isTimeLimit ? (
                    <Form.Item label="其他说明" {...formItemLayout}>
                      {getFieldDecorator("discription", {
                        initialValue: item && item.discription
                      })(<Input.TextArea placeholder="请输入其他说明" />)}
                    </Form.Item>
                  ) : (
                    undefined
                  )}
                  {isTimeLimit ? (
                    <Form.Item label="限时抢购时间" {...formItemLayout}>
                      {getFieldDecorator("time", {
                        initialValue:
                          item && item.limitBeginTime && item.limitEndTime
                            ? [
                                moment(item.limitBeginTime),
                                moment(item.limitEndTime)
                              ]
                            : undefined
                      })(
                        <DatePicker.RangePicker
                          showTime={{ format: "HH:mm" }}
                          format="YYYY-MM-DD HH:mm"
                          placeholder={["开始时间", "结束时间"]}
                          onOk={this.onSelectTimeOk}
                        />
                      )}
                    </Form.Item>
                  ) : (
                    undefined
                  )}
                  {isBargain ? (
                    <Form.Item label="砍价次数" {...formItemLayout}>
                      {getFieldDecorator("bargainTimes", {
                        initialValue: (item && item.bargainTimes) || 3
                      })(<InputNumber placeholder="请输入砍价次数" min={3} />)}
                    </Form.Item>
                  ) : (
                    undefined
                  )}
                  {isGroup ? (
                    <Form.Item label="团购人数" {...formItemLayout}>
                      {getFieldDecorator("groupCount", {
                        initialValue: (item && item.groupCount) || 3
                      })(<InputNumber placeholder="请输入团购人数" min={3} />)}
                    </Form.Item>
                  ) : (
                    undefined
                  )}
                  <Form.Item label="是否上架" {...formItemLayout}>
                    {getFieldDecorator("isSale", {
                      valuePropName: "checked",
                      initialValue: item && item.isSale
                    })(<Checkbox />)}
                  </Form.Item>
                  <Form.Item label="是否售罄" {...formItemLayout}>
                      {getFieldDecorator("isSaleOut", {
                        valuePropName: "checked",
                        initialValue: item && item.isSaleOut
                      })(<Checkbox />)}
                    </Form.Item>
                  <Form.Item label="商品详情" {...formItemLayout}>
                    {!loading ? (
                      <LzEditor
                        active={true}
                        importContent={item && item.content}
                        cbReceiver={this.receiveHtml}
                        uploadProps={uploadProps}
                      />
                    ) : (
                      undefined
                    )}
                  </Form.Item>
                  <Form.Item {...tailFormItemLayout}>
                    <Button
                      size={size}
                      loading={loading}
                      type="primary"
                      className={Styles.M_RIGHT}
                      onClick={this.save}
                    >
                      保存
                    </Button>
                    <Button size={size} onClick={this.props.history.goBack}>
                      取消
                    </Button>
                  </Form.Item>
                </Form>
              </Col>
            </TabPane>
            {item && item.id ? (
              <TabPane tab="商品规格" key="2">
                <ItemSkuList
                  loading={loading}
                  itemSkus={itemSkus}
                  onSearch={this.getItemSkus}
                  onEdit={this.editSku}
                  onEditCategory={this.editSkuCategory}
                  onRemove={this.removeSku}
                  onRemoveCategory={this.removeSkuCategory}
                />
              </TabPane>
            ) : (
              <TabPane tab="商品规格" key="2">
                请先保存商品数据
              </TabPane>
            )}
            {item && item.id ? (
              <TabPane tab="商品价格" key="3">
                <ItemSpecList
                  loading={loading}
                  item={item}
                  itemSpecs={totalItemSpecs}
                  onSearch={this.getItemSpecs}
                  onEdit={this.editSpec}
                  onRemove={this.removeSpec}
                />
              </TabPane>
            ) : (
              <TabPane tab="商品价格" key="3">
                请先保存商品数据
              </TabPane>
            )}
          </Tabs>
        </Row>
        {this.state.visible ? (
          <ItemSpecEdit
            visible={this.state.visible}
            item={item}
            itemSpec={itemSpec}
            onSave={this.saveSpec}
            onCancel={this.setVisible}
          />
        ) : (
          undefined
        )}
        {this.state.skuVisible ? (
          <ItemSkuEdit
            visible={this.state.skuVisible}
            itemSku={itemSku}
            itemSkuCategories={itemSkus}
            onSave={this.saveSku}
            onCancel={this.setSkuVisible}
          />
        ) : (
          undefined
        )}
        {this.state.skuCategoryVisible ? (
          <ItemSkuCategoryEdit
            visible={this.state.skuCategoryVisible}
            itemSkuCategory={itemSkuCategory}
            onSave={this.saveSkuCategory}
            onCancel={this.setSkuCategoryVisible}
          />
        ) : (
          undefined
        )}
      </Row>
    );
  }
}

export default connect(({ item, loading: { models: { item: loading } } }) => ({
  item,
  loading
}))(Form.create()(Item));
